<template>
	<view>
		<uni-popup ref="showpopup" type="center" @change="change">
			<view class="uni-tip">
				<text class="uni-tip-title">{{ title }}</text>
				<view class="uni-tip-content">
					<view class="flex ali-cen just-spa-bet bg-WhiteSmoke padd20 radius20">
					    <input class="uni-input" placeholder="请输入文件夹名字" :value="FolderName" @input="onChangeInput" />
					    <text class="cuIcon-roundclose" v-if="showClearIcon" @click="clearIcon"></text>
					</view>
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="cancel('tip')">取消</text>
					<text class="uni-tip-button" @click="Ok('tip')">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	props: {
		isShow: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: '新建文件夹'
		},
		content: {
			type: String,
			default: '请输入您的默认内容'
		}
	},
	name: '',
	components: { uniPopup },
	data(){
		return{
			showClearIcon:false,
			FolderName:""
		}
	},
	watch: {
		isShow() {
			if (this.isShow) {
				this.$refs.showpopup.open();
			}
		}
	},
	methods: {
		change(e) {
			// console.warn(e);
			if(e.show){return}
			this.$emit('update:isShow', false);
		},
		cancel(type) {
			this.FolderName=''
			this.$refs.showpopup.close();
			this.$emit('update:isShow', false);
			this.$emit('cancel')
		},
		Ok() {
			if(this.FolderName=="") return this.$pub.Toast('文件夹名字不能为空！');
			if( this.$tool.HasIncludeChar(this.FolderName,'/')!=-1 || this.$tool.HasIncludeChar(this.FolderName,'.')!=-1 ) return this.$pub.Toast('文件夹名字不能包含（/.）等特殊字符！');
			
			this.$refs.showpopup.close();
			this.$emit('update:isShow', false);
			this.$emit('Ok',this.FolderName)
			this.FolderName=''
		},
		clearIcon(){
			this.showClearIcon = false
			this.FolderName = '';
		},
		// 输入框监听
		onChangeInput(event){
			this.FolderName = event.detail.value;
			if (event.detail.value.length > 0) {
			    this.showClearIcon = true;
			} else {
			    this.showClearIcon = false;
			}
		}
		
	}
};
</script>

<style lang="less" scoped>
	/* #ifdef APP-NVUE */
	.page{
		position: fixed;
		top: 0;
		width: 100%;
		height: 100vh;
		background:rgba(0,0,0,0.2);
	}
	/* #endif */
	/* 提示窗口 */
		.uni-tip {
			/* #ifndef APP-NVUE */
			display: flex;
			flex-direction: column;
			/* #endif */
			/* #ifdef APP-NVUE */
			position: fixed;
			top: 280%;
			left:30%;
			/* #endif */
			width: 300px;
			padding: 15px;
			/* #ifndef APP-NVUE */
			width: 100%;
			/* #endif */
			
			background-color: #fff;
			border-radius: 10px;
		}
	
		.uni-tip-title {
			margin-bottom: 10px;
			text-align: center;
			font-weight: bold;
			font-size: 16px;
			color: #333;
		}
	
		.uni-tip-content {
			/* padding: 15px;
	*/
			font-size: 14px;
			text-align: center;
			padding: 20rpx;
			color: #666;
		}
	
		.uni-tip-group-button {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			margin-top: 20px;
		}
	
		.uni-tip-button {
			flex: 1;
			text-align: center;
			font-size: 14px;
			color: #3b4144;
		}
</style>
